<template>
	<view class="warp">
		<!-- background pic start -->
		<view class="bg" :style="{height:'calc(440rpx + ' + StatusBar + 'px)'}">
			<view class="logo-contnt flex align-center justify-center flex-direction">
				<view class="logo width-180 height-180"></view>
				<!-- <view>欢迎来到fust-UI</view> -->
			</view>
		</view>
		<!-- background pic end -->

		<!-- 密码login start -->
		<view class="flex align-center solid-bottom margin-lr padding-tb">
			<image class="width-34 margin-right" src="../../static/phone1.png" mode="widthFix"></image>
			<input type="number" focus v-model="phone" maxlength="11" placeholder-class="fu-fs32 text-bf"
				:placeholder="i18n['请输入手机号']" name="input" />
		</view>
		<view class="flex align-center solid-bottom margin-lr padding-tb">
			<image class="width-34 margin-right" src="../../static/pwd.png" mode="widthFix"></image>
			<view class="flex align-center justify-between flex-sub" style="min-width: 1px;">
				<input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf"
					v-if="type == 'password'" type="password" v-model="password" placeholder="请输入密码(4-8位字母或数字)"
					maxlength="8" />
				<input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf"
					v-if="type == 'text'" type="text" v-model="password" placeholder="请输入密码(4-8位字母或数字)" maxlength="8" />
				<image class="width-34" src="../../static/open.png" :data-type="type" @click.stop="is_kejian"
					v-if="type == 'text'" mode="widthFix"></image>
				<image class="width-34" src="../../static/close.png" :data-type="type" @click.stop="is_kejian"
					v-if="type == 'password'" mode="widthFix"></image>
			</view>
		</view>
		<view class="flex align-center justify-between text-333 padding-lr margin-top-sm">
			<view class=" " @click="handleJump" data-url="/pages/user/login/forget/index">{{i18n['忘记密码']}}</view>
			<view @click="handleJump" data-type="REDIRECT" data-url="/pages/user/login/login-code/index">
				{{i18n['验证码登录']}}
			</view>
		</view>
		<!-- 密码login end -->
		<!-- 立即登录按钮 start -->
		<button type="success" class="text-white radius-100 margin-lr-lg margin-top-lg bg-theme fu-fs32" shape="circle"
			@click="handleLogin">
			{{i18n['登录']}}
		</button>
		<!-- 立即登录按钮 end -->
		<!-- <view class="margin-top flex align-center justify-center text-999 fu-fs28">
			<view class="margin-right" @tap="handleJump" data-type="REDIRECT" :data-url="'/pages/user/login/register/index'">{{i18n['注册账号']}}</view>
			<view class=" " @click="handleJump" data-url="/pages/user/login/forget/index">{{i18n['忘记密码']}}</view>
		</view> -->
		<view class="padding-top text-center text-red" @tap='toPage' v-if="isAvoid">
			商家入驻>>
		</view>
		<view class="footer" v-if="false">
			<!-- 快捷登陆 start -->
			<ThirdLogin :is_agree="is_select_agree" v-if='isSwitch==0'></ThirdLogin>
			<!-- 快捷登陆 end -->
			<!-- 协议同意 start -->
			<view class="flex align-center justify-center text-666 fu-fs24 margin-top-64">
				<image class="width-30 height-30 margin-right-xs" @click="handle_select" v-if="is_select_agree"
					src="../../static/check.png"></image>
				<image class="width-30 height-30 margin-right-xs" @click="handle_select" v-else
					src="../../static/unchecked.png"></image>
				<view>
					{{i18n['已阅读并同意']}}
					<text class="text-theme" @tap="handleJump"
						data-url="/pages/user/login/user-agreement/index?id=1">《用户协议》</text>
					{{i18n['与']}}
					<text class="text-theme" @tap="handleJump"
						data-url="/pages/user/login/user-agreement/index?id=2">{{i18n['《隐私政策》']}}</text>
				</view>
			</view>
			<!-- 协议同意 end -->
		</view>
		<!-- 断网监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网监测 end -->

	</view>
</template>
<script>
	// 引入验证方法
	import {
		validate
	} from "@/common/utils/index";
	import ThirdLogin from '../../components/third-login/third-login.vue';
	export default {
		components: {
			ThirdLogin
		},
		data() {
			return {
				is_select_agree: false,
				phone: '', //手机号
				password: '', //密码
				isLoading: false, // 立即登录按钮是否点击,@Boolean
				type: 'password', //密码类型
				isSwitch: 1
			};
		},
		onLoad() {
			this.isSwitch = this.$store.state.isSwitch;
		},
		onUnload() {
			// 页面关闭时清除计时器，优化性能
			clearInterval(this.timer);
		},
		methods: {
			toPage() {
				uni.redirectTo({
					url: '/pages/user/shop/shop-come/index'
				})
			},
			/**
			 * @param 是否选择同意协议
			 */
			handle_select() {
				this.is_select_agree = !this.is_select_agree
			},

			//密码是否可见
			is_kejian(e) {
				let type = e.currentTarget.dataset.type;
				if (type == 'password') {
					this.type = 'text';
				} else {
					this.type = 'password';
				}
			},

			/**
			 * @description  立即登录
			 */
			handleLogin() {
				// #ifdef APP-PLUS
				// @desc 隐藏安全键盘
				plus.key.hideSoftKeybord();
				// #endif
				// 如果按钮状态是加载中，直接return，防止用户多次点击
				if (this.isLoading) return;
				// if (!this.is_select_agree) return this.$message.info(this.i18n['请阅读并勾选页面协议']);

				let {
					phone,
					password
				} = this;
				// 手机号不存在
				if (!phone) return this.$message.info(this.i18n['请输入手机号']);
				// 手机号不符合正则验证
				if (!validate(phone, 'phone')) return this.$message.info(this.i18n['请输入正确的手机号']);
				// 密码不符合正则验证
				// if (!validate(password, 'password')) return this.$message.info('请输入字母加数字4-8位密码');
				if (!validate(password, 'password')) return this.$message.info('请输入字母或数字4-8位密码');

				let clientId = 'clientId'
				let appSystem = 'appSystem'

				// #ifdef APP-PLUS
				clientId = plus.push.getClientInfo().clientid || '';
				appSystem = uni.getSystemInfoSync().platform == 'ios' ? 1 : 2;
				// #endif

				// 上述验证都通过，将按钮的点击状态改为true
				this.isLoading = true;
				// postloginByAccount 账号密码登录接口
				this.$api.post(global.apiUrls.postloginByAccount, {
					mobile: phone,
					password,
					clientId,
					user_type: 3,
					appSystem
				}).then(res => {
					console.log(res.data, 'res.data');
					if (res.data.code == 1 && res.data.data) {
						this.$message.info(res.data.msg); // 提示框
						// run_type 1：入仓   2：非入仓
						if (res.data.data.userinfo.run_type == 1) {
							this.setTabBarItem1();
						} else { //非入仓
							this.setTabBarItem();
						}
						this.$store.commit('updateUserInfo', res.data.data.userinfo); // 修改vuex储存的用户信息
						// joinin_state  1：审核中  2：待提交支付费用  3：被驳回   4：待财务审核  5：审核通过  6：财务审核失败

						let joinin_state = res.data.data.joinin_state;
						let store_id = res.data.data.store_id;
						uni.setStorageSync('store_joinin_id', store_id)
						if (joinin_state != 5) {
							uni.navigateTo({
								url: '/pages/user/shop/shop-success/index'
							})
							return;
						} else {
							setTimeout(() => {
								// 把按钮的状态改为false
								this.isLoading = false;
								uni.switchTab({
									url: '/pages/tab/home/shopindex/index'
								})
							}, 800)
						}

					} else if (res.data.code == '-999') { //表示是没有入住的账号
						this.$message.info('该账号还未入驻')
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/user/shop/shop-come/index'
							})
						}, 500)
					} else {
						// 把按钮的状态改为false
						this.isLoading = false;
						// 错误的情况下向用户发送后台返回来的信息
						this.$message.info(res.data.msg); // 错误提示框
					}
				}).catch(err => {
					// 把按钮的状态改为false
					this.isLoading = false;
				})
			},
		},
	};
</script>
<style lang="scss">
	// 主体 start
	.warp {
		background: #fff;
		min-height: 100vh;
		overflow: hidden;

		// background pic start
		.bg {
			width: 100%;
			position: relative;

			.logo-contnt {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;

				.logo {
					background-image: url('/static/logo.png');
					background-repeat: no-repeat;
					background-size: contain;
					border-radius: 40rpx;
					overflow: hidden;
				}
			}
		}



		// background pic end
		// 验证码login end

	}

	// 主体 end
	.footer {
		position: fixed;
		bottom: 116rpx;
		bottom: calc(116rpx + constant(safe-area-inset-bottom));
		bottom: calc(116rpx + env(safe-area-inset-bottom));
		width: 100%;
	}
</style>